import {
  View,
  Text,
  ViewStyle,
  ScrollView,
  ImageBackground,
  ImageStyle,
  TextStyle
} from "react-native"
import { px2dp } from "@/utils"
import { Tabs } from "@ant-design/react-native"
import * as React from "react"
import { color } from "@/theme"
import { images } from "@/assets"
import { inject, observer } from "mobx-react"
// import styled from "styled-components"

const gameEntryBgStyle: ViewStyle = {
  height: px2dp(300),
  width: px2dp(367),
  backgroundColor: "rgba(17,18,23,0.8)",
  borderRadius: px2dp(8),
  marginTop: px2dp(200)
}

const gameTimeTypeStyle: ViewStyle = {
  flexDirection: "row",
  flex: 1
}

// const gameTypeStyle: ViewStyle = {
//   backgroundColor: "#fff",
// }

const _renderTabBar = (tab: any) => {
  return (
    <View style={{ flexDirection: "row" }}>
      <Text style={{ fontSize: px2dp(16) }}>{tab.name}</Text>
      <Text style={{ color: color.palette.orange }}>{tab.sum}</Text>
    </View>
  )
}

const _renderTabContent = (tab: any) => {
  const gameBackgroundStyle: ViewStyle = {
    height: px2dp(230),
    width: "100%"
  }

  const gameEntryStyle: ViewStyle = {
    height: px2dp(120),
    width: "100%",
    flexDirection: "row",
    flex: 1,
    padding: px2dp(8),
    justifyContent: "space-around"
  }

  const ballEntryStyle: ImageStyle = {
    height: px2dp(104),
    width: px2dp(168),
    borderRadius: px2dp(8),
    justifyContent: "flex-end",
    padding: px2dp(6),
    flex: 1
  }
  const smallBallEntryStyle: ImageStyle = {
    height: px2dp(50),
    width: px2dp(88),
    justifyContent: "center",
    paddingLeft: px2dp(5),
    marginRight: px2dp(10)
  }

  const ballNameStyle: TextStyle = {
    fontSize: px2dp(16),
    color: "#fcfcfc",
    textShadowColor: "rgba(0, 0, 0, 0.5)",
    textShadowOffset: { width: px2dp(2), height: px2dp(4) },
    textShadowRadius: 0
  }
  const smallBallContainerStyle: ViewStyle = {
    height: px2dp(100),
    justifyContent: "center",
    padding: px2dp(10)
  }

  // const smallBallGroup = [
  //   {
  //     name: "网球",
  //     id: 3,
  //     sum: 10,
  //   },
  // ]

  return (
    <View style={gameBackgroundStyle}>
      <View style={gameEntryStyle}>
        <ImageBackground source={images.homeImage["1"]} style={ballEntryStyle}>
          <Text style={ballNameStyle}>足球</Text>
          <Text>{tab.sum}</Text>
        </ImageBackground>
        <ImageBackground source={images.homeImage["2"]} style={ballEntryStyle}>
          <Text style={ballNameStyle}>篮球</Text>
          <Text>{tab.sum + 1}</Text>
        </ImageBackground>
      </View>
      <View style={smallBallContainerStyle}>
        <ScrollView horizontal={true}>
          <ImageBackground source={images.homeImage["3"]} style={smallBallEntryStyle}>
            <Text style={{ color: "#e0e8ff", fontSize: px2dp(12) }}>网球</Text>
            <Text style={{ color: "#a0b8ff", fontSize: px2dp(10) }}>{tab.sum + 1}</Text>
          </ImageBackground>
          <ImageBackground source={images.homeImage["3"]} style={smallBallEntryStyle}>
            <Text style={{ color: "#e0e8ff", fontSize: px2dp(12) }}>网球</Text>
            <Text style={{ color: "#a0b8ff", fontSize: px2dp(10) }}>{tab.sum + 1}</Text>
          </ImageBackground>
          <ImageBackground source={images.homeImage["3"]} style={smallBallEntryStyle}>
            <Text style={{ color: "#e0e8ff", fontSize: px2dp(12) }}>网球</Text>
            <Text style={{ color: "#a0b8ff", fontSize: px2dp(10) }}>{tab.sum + 1}</Text>
          </ImageBackground>
          <ImageBackground source={images.homeImage["3"]} style={smallBallEntryStyle}>
            <Text style={{ color: "#e0e8ff", fontSize: px2dp(12) }}>网球</Text>
            <Text style={{ color: "#a0b8ff", fontSize: px2dp(10) }}>{tab.sum + 1}</Text>
          </ImageBackground>
          <ImageBackground source={images.homeImage["3"]} style={smallBallEntryStyle}>
            <Text style={{ color: "#e0e8ff", fontSize: px2dp(12) }}>网球</Text>
            <Text style={{ color: "#a0b8ff", fontSize: px2dp(10) }}>{tab.sum + 1}</Text>
          </ImageBackground>
        </ScrollView>
      </View>
    </View>
  )
}
// interface gameEntryProps {
//   rootStore?: any
//   history?: any
// }
@inject("rootStore")
@observer
export class HomeGameEntry extends React.Component<{}, {}> {
  render() {
    const tabs = [
      {
        name: "即将开赛",
        key: "ready",
        sum: 10,
        title: 0
      },
      {
        name: "今日",
        key: "today",
        sum: 8,
        title: 0
      },
      {
        name: "滚球",
        key: "early",
        sum: 2,
        title: 0
      }
    ]
    tabs.forEach(tab => {
      Object.assign(tab, { title: _renderTabBar(tab) })
    })
    return (
      <View style={gameEntryBgStyle}>
        <View style={{ height: px2dp(30) }}>
          <Text style={{ lineHeight: px2dp(30), textAlign: "center", color: "#fff" }}>公告</Text>
        </View>
        <View style={gameTimeTypeStyle}>
          <Tabs tabs={tabs}>{_renderTabContent}</Tabs>
        </View>
      </View>
    )
  }
}
